<template>
  <div class="hello" v-title data-title="CRM客户管理">
    <!-- 顶部导航 -->
    <el-container>
      <el-header style="padding: 0;">
        <el-row>
          <el-col :span="22">
            <div style="height: 60px;line-height: 60px;">
              <img style="vertical-align: middle;padding:0 20px;width: 200px" alt="Vue logo" src="../assets/xhb.png">
            </div>
          </el-col>
          <el-col :span="2">
            <div id="isBtn" :class="userStyle === true?'user-ho':'user'" @click="clickLogout">
              <el-avatar id="isBtnIcon" style="vertical-align: middle;" :src="emp.empImg" size="medium"></el-avatar>
              <span id="isBtnText" style="font-size: 16px;">{{emp.empName}}</span>
            </div>
            <div class="dropdown-menu" ref="isBtn" v-show="userBtn">
                <a @click="logout" class="cursor"><i style="color: black" class="el-icon-switch-button"></i>安全退出</a>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <!-- 左边导航栏 -->
        <el-aside style="width:160px;">
          <el-row>
            <el-menu :default-active="$route.path" class="el-menu-vertical-demo" background-color="#215ca0" text-color="#fff"
              active-text-color="#D3DCE6" style="padding-top:30px;border: none;">
              <el-submenu :index="ft.funTypeId+''" v-for="ft in funMenu" :key="ft.funTypeId">
                <template slot="title">
                  <i :class="ft.funTypeIcon"></i>
                  <span>{{ft.funTypeName}}</span>
                </template>
                <el-menu-item-group>
                  <router-link :to="fun.functionPath" v-for="fun in ft.functions" :key="fun.functionId">
                    <el-menu-item :index="fun.functionId+''">
                      {{fun.functionName}}
                    </el-menu-item>
                  </router-link>
                </el-menu-item-group>
              </el-submenu>

            </el-menu>
          </el-row>
        </el-aside>
        <el-main>
          <div class="content">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      emp: {},
      userBtn: false, // 是否显示注销按钮
      userStyle: false, // 按钮出现样式
      funMenu: [],
      contains: ''
    }
  },
  methods: {
    initData () {
      this.$axios.get('http://localhost:8088/emp')
        .then(v => {
          this.emp = v.data
        })
        .catch(function (v) {})
    },
    clickLogout () {
      if (this.userBtn === true) {
        this.userStyle = false
        this.userBtn = false
      } else {
        this.userStyle = true
        this.userBtn = true
      }
    },
    logout () {
      this.$axios.get('http://localhost:8088/logout')
        .then(v => {
          if (v.data === 'success') {
            // 跳转界面
            this.$router.push('/login')
          } else {
            alert('注销失败')
          }
        })
        .catch(function (v) {})
    },
    menu () {
      this.$axios.get('http://localhost:8088/fun-menu')
        .then(v => {
          if (v.data.length === 0) {
            this.$router.push('/login')
          } else {
            this.funMenu = v.data
          }
        }).catch()
    },
    queryHide (e) {
      if (!this.$refs.isBtn.contains(e.target) && e.target.id !== 'isBtn' && e.target.id !== 'isBtnText' &&
        e.target.id !== 'isBtnIcon' && e.target.className !== 'btn-class') {
        this.userBtn = false
        this.userStyle = false
      }
    }
  },
  created () {
    this.initData()
    this.menu()
  },
  mounted () {
    document.addEventListener('click', this.queryHide)
  },
  beforeDestroy () {
    document.removeEventListener('click', this.queryHide)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  ::-webkit-scrollbar {
    width: 0 !important;
    height: 0;
  }
  .hello{
    height: 100%;
  }
  .nav li {
    list-style: none;
  }

  .iconboxs i {
    line-height: 40px;
    font-size: 20px;
  }

  .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 18px;
    z-index: 1000;
    float: right;
    width: 160px;
    margin: 2px 0 0;
    padding: 4px 0;
    font-size: 14px;
    text-align: left;
    background-color: #fff;
    border: 0;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    border-radius: 4px;
    line-height: 0px;
  }

  .dropdown-menu>a {
    display: block;
    padding: 8px 20px;
    font-weight: 400;
    color: black;
  }
  .dropdown-menu>a:hover {
    display: block;
    padding: 8px 20px;
    font-weight: 400;
    color: black;
    background: #f5f5f5;
  }
  .cursor{
    cursor: pointer;
  }
  .user {
    width: 110px;
    text-align: center;
    cursor: pointer
  }
  .user-ho{
    width: 110px;
    text-align: center;
    cursor: pointer;
    background: rgba(54, 64, 74, 0.05)
  }
  i{
    color: white;
  }
  .el-menu-vertical-demo {
    height: 100%
  }
</style>
